﻿{{!<Layout}}
{{ViewBag Title='Scheduler'}}
{{ViewBag ShowFooter=true}}

<div class="ui inverted page dimmer" id="dimmer"><div class="ui loader"></div></div>

{{#with Model}}
<div id="scheduler-dashboard">
    <div id="msg-panel"></div>

    <h3 class="ui dividing header" style="margin-top: 0px">Overview</h3>

    <div class="ui inverted statistic" style="background-color: #0c5a0c; background-image: linear-gradient(#107c10, #0c5a0c);">
        <div class="value"><i class="small check icon"></i> {{ExecutedJobs}}</div>
        <div class="label">Jobs executed</div>
    </div>

    <div class="ui inverted statistic" style="background-color: #c42121; background-image: linear-gradient(#db2828, #c42121);">
        <div class="value"><i class="small close icon"></i> {{FailedJobs}}</div>
        <div class="label">Jobs failed</div>
    </div>

    <div class="ui inverted statistic" style="background-color: #1c70b0; background-image: linear-gradient(#2185d0, #1c70b0);">
        <div class="value"><i class="small play icon"></i> {{ExecutingJobs}}</div>
        <div class="label">Jobs executing</div>
    </div>

    <div class="ui statistic" style="background-color: #f0f0f0;">
        <div class="value">
            <div style="height: 50px" class="dashboard-histogram">{{>Histogram History}}</div>
        </div>
        <div class="label">Latest Activity</div>
    </div>

    <div class="ui statistic" style="box-shadow: none">
        <div class="inline-stats">
            <span>{{JobsCount}}</span> jobs<br>
            <span>{{TriggerCount}}</span> triggers
        </div>
    </div>



    <div class="ui stackable grid">
        <div class="seven wide column" style="padding-right: 14px !important">
            <h3 class="ui dividing header">Status</h3>
            <table class="ui table">
                <tbody>
                    <tr>
                        <td style="min-width: 220px">In Standby Mode</td>
                        <td>{{Upper MetaData.InStandbyMode}}</td>
                    </tr>
                    <tr>
                       <td>Running Since</td>
                        <td>{{RunningSince}} {{UtcLabel}}</td>
                    </tr>
                    <tr>
                        <td>Shutdown</td>
                        <td>{{Upper MetaData.Shutdown}}</td>
                    </tr>
                    <tr>
                        <td>Started</td>
                        <td>{{Upper MetaData.Started}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="nine wide column" id="col-actions">
            <h3 class="ui dividing header">Actions</h3>

            <p style="margin-top: 1em">
                {{#if MetaData.InStandbyMode}}
                <button class="ui small button green" id="btn-start"><i class="play icon"></i>Start</button>
                {{else}}
                <button class="ui small button grey" id="btn-standby"><i class="stop icon"></i>Standby</button>
                {{/if}}
                <button class="ui small button red" id="btn-shutdown"><i class="power icon"></i>Shutdown</button>
                <button class="ui small button" id="btn-pause"><i class="pause icon"></i>Pause All</button>
                <button class="ui small button" id="btn-resume"><i class="play icon"></i>Resume All</button>
            </p>

            {{>GroupActions items=JobGroups id='job-groups' header='Job Groups'}}
            {{>GroupActions items=TriggerGroups id='trigger-groups' header='Trigger Groups'}}

        </div>
    </div>

    <h3 class="ui dividing header">Node Info</h3>
    <table class="ui table">
        <tbody>
            <tr>
                <td style="min-width: 220px">Machine Name</td>
                <td>{{MachineName}}</td>
            </tr>
            <tr>
                <td>Application</td>
                <td>{{Application}}</td>
            </tr>
            <tr>
                <td>Scheduler Name</td>
                <td>{{MetaData.SchedulerName}}</td>
            </tr>
            <tr>
                <td>Scheduler Instance Id</td>
                <td>{{MetaData.SchedulerInstanceId}}</td>
            </tr>
            <tr>
                <td>Scheduler Remote</td>
                <td>{{Upper MetaData.SchedulerRemote}}</td>
            </tr>
            <tr>
                <td>Scheduler Type</td>
                <td>{{MetaData.SchedulerType.AssemblyQualifiedName}}</td>
            </tr>
            <tr>
                <td>Version</td>
                <td>{{MetaData.Version}}</td>
            </tr>
        </tbody>
    </table>

    <h3 class="ui dividing header">Job Store</h3>
    <table class="ui table">
        <tbody>
            <tr>
                <td style="min-width: 220px">Job Store Clustered</td>
                <td>{{Upper MetaData.JobStoreClustered}}</td>
            </tr>
            <tr>
                <td>Job Store Supports Persistence</td>
                <td>{{Upper MetaData.JobStoreSupportsPersistence}}</td>
            </tr>
            <tr>
                <td>Job Store Type</td>
                <td>{{MetaData.JobStoreType.AssemblyQualifiedName}}</td>
            </tr>
        </tbody>
    </table>

    <h3 class="ui dividing header">Thread Pool</h3>
    <table class="ui table">
        <tbody>
            <tr>
                <td style="min-width: 220px">Thread Pool Size</td>
                <td>{{MetaData.ThreadPoolSize}}</td>
            </tr>
            <tr>
                <td>Thread Pool Type</td>
                <td>{{MetaData.ThreadPoolType.AssemblyQualifiedName}}</td>
            </tr>
        </tbody>
    </table>

</div>

<div class="ui mini modal" id="shutdown-dialog">
    <div class="content">
        <p>Are you sure you want to shut down Quartz Scheduler?</p>
        <p>This action <b>is not reversible</b> which means, you will not be able to connect to this page any more!</p>
    </div>
    <div class="actions">
        <div class="ui approve red button">Shutdown</div>
        <div class="ui cancel button">Cancel</div>
    </div>
</div>

{{/with}}

<script>
    initHistogramTooltips($('.histogram > .bar'));
    initDimmer();

    function doAction(content) {
        $('#dimmer').dimmer('show');

        $.ajax({
            type: 'POST', url: '{{ActionUrl "Action"}}',
            data: JSON.stringify(content),
            contentType: 'application/json', cache: false,
            success: function () {
                document.location = '{{ActionUrl ""}}';
            },
            error: function (e) {
                $('#dimmer').dimmer('hide');
                prependErrorMessage(e, $('#msg-panel'));
            }
        });
    }

    function confirmDialog(dlg, action) {
        dlg.modal({ duration: 250, onApprove: function () { doAction({ action: action }); } })
        .modal('show');
    }

    // event handlers
    $('#btn-shutdown').click(function () { confirmDialog($('#shutdown-dialog'), 'shutdown'); });
    $('#btn-pause').click(function () { doAction({ action: 'pause' }); });
    $('#btn-resume').click(function () { doAction({ action: 'resume' }); });
    $('#btn-standby').click(function () { doAction({ action: 'standby' }); });
    $('#btn-start').click(function () { doAction({ action: 'start' }); });

    $(document).on('click', '#job-groups.group-actions button, #trigger-groups.group-actions button', function () {
        doAction({ action: $(this).data('action'), name: $(this).data('name'), groups: $(this).closest('.group-actions').attr('id') });
    });

</script>
